<template>
  <div class="addservetop">
    <div class="titladdserve">
      <div class="diyiaddserve"></div>
      <font>新增服务信息</font>
    </div>
    <div class="dieraddserve">
      <hr color="#F7FAFD" />
    </div>
    <div class="disanaddserve"><font>居民信息</font></div>
    <div class="disiaddserve">
      <table border="0" width="100%">
        <tr>
          <td width="62px"><font>选择居民*</font></td>
          <td>
            <span v-if="!flag" style="color:#C0C0C0"> {{ name_ }} </span>
            <el-select v-model="list.user_id" placeholder="请选择" v-if="flag">
              <el-option
                v-for="item in list1"
                :label="item.user_name"
                :key="item.user_id"
                :value="item.user_id"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
      </table>
    </div>
    <div class="diwuaddserve">
      <hr color="#F7FAFD" />
    </div>
    <div class="diliuaddserve"><font>服务信息</font></div>
    <div class="diqiaddserve">
      <table border="0" height="200px" width="100%">
        <tr>
          <td width="62px"><font>服务机构*</font></td>
          <td>
            <el-select v-model="list.sign_organization" placeholder="请选择">
              <el-option
                v-for="item in list2"
                :label="item.organization_name"
                :key="item.organization_id"
                :value="item.organization_id"
              >
              </el-option>
            </el-select>
          </td>
          <td width="62px"><font>服务团队*</font></td>
          <td>
            <el-select v-model="list.sign_team" placeholder="请选择">
              <el-option
                v-for="item in list3"
                :label="item.team_name"
                :key="item.team_id"
                :value="item.team_id"
              >
              </el-option>
            </el-select>
          </td>
          <td width="62px"><font>服务医生*</font></td>
          <td>
            <el-select v-model="list.sign_doctor" placeholder="请选择">
              <el-option
                v-for="item in list4"
                :label="item.doctor_name"
                :key="item.doctor_id"
                :value="item.doctor_id"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td><font>服务包*</font></td>
          <td>
            <el-select v-model="list.serve_page" placeholder="请选择">
              <el-option
                v-for="item in list5"
                :label="item.serve_name"
                :key="item.serve_id"
                :value="item.serve_id"
              >
              </el-option>
            </el-select>
          </td>
          <td><font>服务项目*</font></td>
          <td>
            <el-select v-model="list.projects_id" placeholder="请选择">
              <el-option
                v-for="item in list6"
                :label="item.project_name"
                :key="item.project_id"
                :value="item.project_id"
              >
              </el-option>
            </el-select>
          </td>
          <td><font>服务地点*</font></td>
          <td>
            <el-select v-model="list.user_didian" placeholder="请选择">
              <el-option
                v-for="item in list7"
                :label="item.label"
                :key="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td><font>服务时间</font></td>
          <td>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="list.contract_date"
              style="width: 202px"
            ></el-date-picker>
          </td>
          <td>
            <font>服务备注</font>
          </td>
          <td colspan="3">
            <el-col style="width: 595px">
              <el-input type="textarea" :rows="2" v-model="list.user_biezhu"></el-input>
            </el-col>
          </td>
        </tr>
      </table>
    </div>
    <div class="dijiuaddserve">
      <hr color="#F7FAFD" />
    </div>
    <div class="dibaaddserve">
      <el-button type="primary" @click="tijiao()">提交审核</el-button>
      <el-button plain @click="fanhui">返回</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from 'moment';
axios.defaults.baseURL = "http://localhost:8080";
export default {
  data() {
    return {
      list:{
        user_id:null,
        sign_organization:null,
        sign_team:null,
        sign_doctor:null,
        serve_page:null,
        projects_id:null,
        user_didian:null,
        contract_date:"",
        user_biezhu:""
      },
      list1: "", //用户
      value1: "",
      list2: "", //机构
      value2: "",
      list3: "",
      value3: "", //团队
      list4: "",
      value4: "", //医生
      list5: "",
      value5: "", //包
      list6: "",
      value6: "", //项目
      list7: [
        {
          value: 1,
          label: "签约人家里",
        },
        {
          value: 2,
          label: "机构门诊",
        },
      ],
      value7: "", //地点
      shijna: "", //时间
      biezhu: "", //备注
      flag: false,
      name_:""
    };
  },
  methods: {
    tijiao(){
      let date = moment(this.list.contract_date).format("YYYY-MM-DD")
      this.list.contract_date = date
      this.list.serve_state = 1
      axios({
        url: "/sign/addserve",
        method: "POST",
        params:{
          user:this.list
      }
      }).then((res) => {
        this.$router.push({
        path:'/serve01',
      });
      });
    },
    query6() {
      axios({
        url: "data/getServeObjList",
        method: "GET",
      }).then((res) => {
        this.list6 = res.data; //把值传到list里面
      });
    },
    query5() {
      axios({
        url: "/sign/getServePageList",
        method: "GET",
      }).then((res) => {
        this.list5 = res.data; //把值传到list里面
        console.log(res.data);
      });
    },
    query4() {
      axios({
        url: "/doctor/getDoctorList",
        method: "GET",
      }).then((res) => {
        this.list4 = res.data; //把值传到list里面
        console.log(res.data);
      });
    },
    query3() {
      axios({
        url: "/data/getTeamList",
        method: "GET",
      }).then((res) => {
        this.list3 = res.data; //把值传到list里面
      });
    },
    query2() {
      axios({
        url: "/sign/getOrganizationList",
        method: "GET",
      }).then((res) => {
        this.list2 = res.data; //把值传到list里面
      });
    },
    query1() {
      axios({
        url: "/serve/getUserXiaLa",
        method: "GET",
      }).then((res) => {
        this.list1 = res.data; //把值传到list里面
      });
    },
    fanhui(){
      this.$router.back()
    }
  },
  created() {
    this.query6(),
      this.query5(),
      this.query4(),
      this.query3(),
      this.query2(),
      this.query1(),
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#F2F7FB");
      if(this.$route.query.id == null){
        this.flag = true
      }else{
        this.flag = false
        this.list.user_id = this.$route.query.id
        this.name_ = this.$route.query.name
      }
  },
};
</script>

<style>
.dijiuaddserve{
  float: left;
  width: 96%;
  height: 100px;
  margin-left: 2%;
  margin-top: 2%;
}
.dibaaddserve{
  float: left;
  width: 96%;
  height: 70px;
  margin-left: 2%;
  margin-top: -4%;
  /* background-color: #2984f8; */
}
.diqiaddserve font {
  color: #999999;
}
.diqiaddserve {
  float: left;
  width: 96%;
  /* height: 100px; */
  margin-left: 2%;
  margin-top: 2%;
  font-size: 13px;
  /* background-color: #999999; */
}
.diliuaddserve {
  float: left;
  width: 96%;
  /* height: 100px; */
  margin-left: 2%;
  margin-top: 2%;
}
.diwuaddserve {
  float: left;
  width: 96%;
  /* height: 100px; */
  margin-left: 2%;
  margin-top: 2%;
  /* background-color: red; */
}
.disiaddserve font {
  color: #999999;
  font-size: 13px;
}
.disiaddserve {
  float: left;
  width: 96%;
  /* height: 100px; */
  margin-left: 2%;
  margin-top: 2%;
  /* background-color: red; */
  font-size: 13px;
}
.disanaddserve {
  float: left;
  width: 96%;
  margin-left: 2%;
  margin-top: 2%;
  /* margin-top: -10%; */
  /* height: 100px; */
  /* background-color: red; */
  font-size: 16px;
}
.dieraddserve {
  float: left;
  height: 10px;
  width: 96%;
  margin-left: 2%;
  margin-top: 1%;
  /* background-color: blue; */
}
.diyiaddserve {
  width: 6px;
  height: 20px;
  background-color: #2984f8;
  border-radius: 5px;
  margin-left: 2%;
  display: inline-block;
  margin-right: 10px;
}
.titladdserve {
  width: 100%;
  height: 40px;
  font-size: 18px;
  /* margin-top: 10%; */
  display: flex;
  align-items: center;
  /* background: rgb(255, 214, 214); */
}
.addservetop {
  width: 1150px;
  height: 630px;
  background: white;
  margin: 20px auto;
}
</style>